<template>
  <div class="question_container">
    <el-form
      label-width="80px"
      :model="questionTime"
      class="time_form"
      :rules="rules"
      ref="timeForm"
    >
      <el-form-item label="开始时间" prop="startTime">
        <el-date-picker
          v-model="questionTime.startTime"
          type="datetime"
          value-format="timestamp"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="结束时间" prop="endTime">
        <el-date-picker
          v-model="questionTime.endTime"
          type="datetime"
          value-format="timestamp"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>

      <el-button type="primary" @click="updateExamTime">更新时间</el-button>

      <el-button type="primary" @click="dialogVisible = true"
        >新增题目</el-button
      >
      <el-button type="primary" @click="filedialogVisible = true"
        >文件新增题目</el-button
      >
    </el-form>
    <p class="nowtime">
      <span> {{ questionTime.start }} </span>
      |
      <span>{{ questionTime.end }}</span>
    </p>
    <div class="question_main">
      <el-main
        style="text-align: left"
        v-for="(item, index) in questionList"
        :key="item.tic"
      >
        <el-card shadow="always">
          <div slot="header" class="clearfix">
            <span
              >题目<span style="font-weight: 700; font-size: 18px"
                >[{{ index + 1 }}]</span
              ></span
            >
          </div>
          <p
            class="question_content"
            style="text-indent: 2em; white-space: pre-wrap"
            v-html="item.topic"
          ></p>
        </el-card>
      </el-main>
    </div>

    <!-- 题目提交 -->
    <!-- /management/topic -->
    <el-dialog
      title="新增题目"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>
        <el-form ref="form" :model="question" label-width="80px" :rules="rules">
          <el-form-item label="题号" prop="tid">
            <el-input
              v-model="question.tid"
              placeholder="请输入题号"
            ></el-input>

            <!-- <el-autocomplete
              class="inline-input"
              v-model="question.tic"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              @select="handleSelect"
            >
              <template slot-scope="{ item }">
                <div class="name">{{ item.tic }}</div>
                <span class="addr">{{ item.topic }}</span>
              </template>
            </el-autocomplete> -->
          </el-form-item>
          <el-form-item label="题目内容" prop="topic">
            <el-input
              type="textarea"
              :rows="5"
              placeholder="请输入内容"
              v-model="question.topic"
            ></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="postQuestion">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="提示"
      :visible.sync="filedialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-upload
        class="upload-demo"
        drag
        :action="$httpUrl + '/management/topicBatch'"
        multiple
        name="file"
        :headers="headers"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          只能上传doc/docx文件，且不超过100kb
        </div>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      questionList: [],
      dialogVisible: false,
      filedialogVisible: false,
      question: {
        tic: null,
        topic: "",
      },
      questionTime: {},
      headers: {
        Authorization: this.$cookies.get("token"),
      },
      rules: {
        startTime: [
          {
            type: "date",
            required: true,
            message: "请选择开始时间",
            trigger: "change",
          },
        ],
        endTime: [
          {
            type: "date",
            required: true,
            message: "请选择结束时间",
            trigger: "change",
          },
        ],
        tid: [
          { required: true, message: "请输入题号", trigger: "blur" },
          { min: 1, max: 3, message: "长度在 1 到 3 个字符", trigger: "blur" },
        ],
        topic: [{ required: true, message: "请输入题目内容", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getExamTime();
    this.init();
  },
  methods: {
    async init() {
      const res = await this.$http.get("/management/getQuestion");
      console.log(res);
      this.questionList = res.data.data;
      this.questionList.filter((item) => {
        const reg = /\/api\//g;
        item.topic = item.topic.replace(reg, this.$httpUrl);
      });
    },
    async getExamTime() {
      // /management/getExamTime
      const res = await this.$http.get("/management/getExamTime");
      console.log(res);
      this.questionTime = res.data.data;
      console.log(this.questionTime);
    },
    async updateExamTime() {
      console.log(this.questionTime);
      this.$refs["timeForm"].validate(async (valid) => {
        if (valid) {
          // /management/setExamTime
          const res = await this.$http({
            url: "/management/setExamTime",
            method: "POST",
            params: {
              startTime: this.questionTime.startTime + "",
              endTime: this.questionTime.endTime + "",
            },
          });
          console.log(res);
          if (res.data.message != "ok") {
            return this.$message.error(res.data.message);
          }
          this.$message.success("设置成功");
          this.getExamTime();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleClose(done) {
      // 初始化
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    async postQuestion() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          const res = await this.$http.post("/management/topic", this.question);
          console.log(res);
          if (res.data.message != "ok") {
            return this.$message.error(res.data.message);
          }
          this.$message.success("操作成功");
          this.init();
          this.dialogVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // // 输入建议
    // querySearch(queryString, cb) {
    //   var restaurants = this.questionList;
    //   var results = queryString
    //     ? restaurants.filter(this.createFilter(queryString))
    //     : restaurants;
    //   // 调用 callback 返回建议列表的数据
    //   console.log(results);
    //   cb(results);
    // },
    // createFilter(queryString) {
    //   return (restaurant) => {
    //     console.log(restaurant);
    //     return (
    //       restaurant.tic===queryString
    //     );
    //   };
    // },
    // handleSelect(item) {
    //   console.log(item);
    // },
  },
};
</script>
<style lang="less" scoped>
.nowtime {
  position: relative;
  left: 94px;
  top: -65px;
  text-align: left;
  span:nth-child(1) {
    display: inline-block;
    margin-right: 68px;
  }
  span:nth-child(2) {
    display: inline-block;
    margin-left: 68px;
  }
}
.time_form {
  margin-top: 20px;
  .el-form-item {
    margin: 0 5px;
  }
  .el-button {
    margin: 0 20px;
  }
  display: flex;
  // justify-content: spa;
  align-items: center;
}
.question_main {
  overflow-y: scroll;
  height: 78vh;
}
.el-card {
  padding: 0;
  margin: 0;
}
.question_content {
  display: inline-block;
  // ::v-deep img{
  //   // width: 300px;
  //   height: 300px;
  // }
  // ::v-deep img {
  //   width: 90%;
  //   height: 600px;
  //   border: 5px solid pink;
  //   border-radius: 5px;
  // }

  //  ::v-deep img:hover {
  //   width: 100%;
  //   height: 800px;
  // position: fixed;
  // top: 50%;
  // left: 50%;
  // transform: translate(-50%,-50%);
  // height: 800px;
  // }
}

// 样式穿透
.question_content:deep(img) {
  width: 90%;
  height: 600px;
  border: 5px solid pink;
  border-radius: 5px;
}
// .question_content >>> img{
//       width: 90%;
//     height: 600px;
//     border: 5px solid pink;
//     border-radius: 5px;
// }
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}

.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}
</style>